import React, {Component} from 'react';

import axios from "axios";

import './index.css'
import Pubsub from "pubsub-js";

class Header extends Component {

    state={
        keyWord:''
    }


    saveKeyWord=()=>{
        return(e)=>{
            this.setState({
                keyWord:e.target.value
            })
        }
    }

    search=()=>{
        axios.get(`https://api.github.com/search/users?q=${this.state.keyWord}`).then(res=>{
            // 发布消息
            Pubsub.publish("getData",res.data.items)
        },err=>{
            console.log(err)
        })

    }

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3>
                <div>
                    <input type="text" placeholder="enter the name you search" onChange={this.saveKeyWord()}/>&nbsp;<button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

export default Header;